<template>
  <el-container class="source-container">
    <el-aside
        bordered
        width="160px"
        class="source-sider">
      <el-menu :default-active="path" @select="handleOpen" class="my_data_menu">
        <el-menu-item index="/data/source">
          <span>我的数据源</span>
        </el-menu-item>
        <el-menu-item index="/data/data/index">
          <span>我的数据集</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main class="source-content">
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
import { computed, defineComponent } from "vue";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  name: "my-data",
  setup() {
    const route = useRoute();
    const router = useRouter();
    const path = computed(() => {
      return route.path;
    });
    const handleOpen = (key) => {
      router.push(key);
    };
    return {
      path,
      handleOpen,
    };
  }
});
</script>

<style scoped>
.my_data_menu {
  height: 100%;
}
.source-content{
  min-height: 70vh;
}
.source-container, .source-sider, .source-content {
  background-color: transparent;
}
</style>